<template>
	<view class="home-container">
		<!-- 搜索框 -->
		<TopInput></TopInput>
		<!-- 导航栏 -->
		<NavBar 
			:dynastyList="dynastyList"
			:activeIndex="activeIndex"
			@setActive="setActive"
		></NavBar>
		<view class="nav-bar-home"></view>
		<!-- 主体内容 -->
		<ArticleList 
			class="list-container"
			:dynastyList="dynastyList"
			:data="articleList"
			@setActive="setActive"
			:activeIndex="activeIndex"
			@getUserLike="_get_articles"
		></ArticleList>
	</view>
</template>

<script>
	import {mapMutations,mapState} from 'vuex';
	export default {
		data() {
			return {
				dynastyList:['全部'],
				activeIndex:0
				// data:[]
			}
		},
		onLoad() {
			this._get_article();
			this.getdynastyList();
		},
		methods: {
			async _get_article(){
				// if(this.articleList.length!=0){return;}
				let {data} = await this.$http.get_acticle();
				// this.data=data;
				this.updateArticleList(data);		
				// console.log(this.userInfo)
			},
			async _get_articles(){
				// console.log('aa')
				// if(this.articleList.length!=0){return;}
				let {data} = await this.$http.get_acticle();
				// this.data=data;
				this.updateArticleList(data);		
				// console.log(this.userInfo)
			},
			getdynastyList(){
				for(let i=0;i<this.articleList.length;i++){
					if(this.dynastyList.indexOf(this.articleList[i].dynasty)===-1){
						this.dynastyList.push(this.articleList[i].dynasty);
					}
				}
				// console.log(this.articleList)
			},
			setActive(index){
				this.activeIndex=index;
			},
			...mapMutations(['updateArticleList'])
		},
		computed:{
			...mapState(['userInfo','articleList'])
		}
	}
</script>

<style>
page{
	display: flex;
	height: 100%;
}
.home-container{
	flex: 1;
	overflow: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	align-items: inherit;
}
.nav-bar-home{
	height: 67rpx;
}
.list-container{
	/* flex: 1; */
	/* box-sizing: border-box; */
}
</style>
